<template>
  <!-- 
    active-text-color 是激活后文字的颜色
    background-color 是背景色
    class 是自定义的样式
    default-active 是默认激活的下标
    text-color 是未激活的文本颜色
    @open 是打开列表激活的事件
    @close 是关闭列表激活的事件
  -->
  <el-menu
    active-text-color="green"
    background-color="#545c64"
    class="el-menu-vertical-demo"
    default-active="4"
    text-color="#ccc"
    @open="handleOpen"
    @close="handleClose"
  >
    <el-sub-menu index="1">
      <!-- 
        #title 表示标题 
      -->
      <template #title>
        <el-icon>
          <location />
        </el-icon>
        <span>Navigator One</span>
      </template>
      <!-- 
        el-menu-item-group 是表示分组 
        标题的使用与对话框（dialog）相似 既可以用属性 也可以用插槽 属性名都是 title
        但是不用的 dialog 用插槽是 header 而这个是 title
      -->
      <el-menu-item-group title="Group One">
        <!-- 子菜单 -->
        <el-menu-item index="1-1">item one</el-menu-item>
        <el-menu-item index="1-2">item two</el-menu-item>
      </el-menu-item-group>
      <el-menu-item-group title="Group Two">
        <template #title>1111</template>
        <el-menu-item index="1-3">item three</el-menu-item>
      </el-menu-item-group>
      <el-sub-menu index="1-4">
        <template #title>item four</template>
        <el-menu-item index="1-4-1">item one</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>
    <!-- 
      el-menu-item 是没有子元素的 menu 菜单
      index 是唯一标识
      disabled 不能选中
    -->
    <el-menu-item index="2">
      <el-icon><icon-menu /></el-icon>
      <span>Navigator Two</span>
    </el-menu-item>
    <el-menu-item index="3">
      <el-icon>
        <document />
      </el-icon>
      <span>Navigator Three</span>
    </el-menu-item>
    <el-menu-item index="4">
      <el-icon>
        <setting />
      </el-icon>
      <span>Navigator Four</span>
    </el-menu-item>
  </el-menu>
</template>

<script setup>
  import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
  } from '@element-plus/icons-vue'
  const handleOpen = (key, keyPath) => {
    // console.log(key, keyPath)
    console.log('open');
    
  }
  const handleClose = (key, keyPath) => {
    // console.log(key, keyPath)
    console.log('close');
  }
</script>

<style scoped></style>